<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" @leftClick="goBack" title="订单续费"></u-navbar>
		<view class="margin-sm padding-sm bg-white radius">
			<view class="text-gray">续费开始时间</view>
			<view class="margin-top-sm text-black text-bold text-lg">{{orderDetalist.endTime}}</view>
		</view>
		<view class="margin-sm padding-sm bg-white radius">
			<!-- <view @click="showRoomPicker=true" class="flex align-center justify-between">
				<view>选择房间</view>
				<view>
					<text class="text-bold">{{orderDetalist.RoomName}}</text>
					<text class="text-bold margin-left-xs cuIcon-right"></text>
				</view>
			</view> -->
			<view class="flex align-center justify-between">
				<view>当前房间</view>
				<text class="text-bold">{{orderDetalist.roomName}}</text>
			</view>
			<u-line dashed margin="20rpx 0px 20rpx 0"></u-line>
			<view @click="showTimePicker=true" class="flex align-center justify-between">
				<view>结束时间</view>
				<view>
					<text class="text-bold">{{$u.timeFormat(EndTime, 'yyyy年mm月dd日 hh时MM分')}}</text>
					<text class="text-bold margin-left-xs cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="margin-sm padding-sm bg-white radius">
			<view class="flex align-center justify-between">
				<view>合计时长</view>
				<text class="text-bold">{{hours}}小时</text>
			</view>
			<u-line dashed margin="20rpx 0px 20rpx 0"></u-line>
			<view class="flex align-center justify-between">
				<view>结算费用</view>

				<view class=" text-bold text-price">
					{{totalFre}}
				</view>
			</view>
		</view>

		<u-datetime-picker immediateChange @cancel="showTimePicker=false" title="选择结束时间" :show="showTimePicker"
			v-model="value1" :minDate="BeginTime" :maxDate="maxEndTime" @confirm="confirmEndTime" mode="datetime">
		</u-datetime-picker>

		<!-- <u-picker immediateChange :show="showRoomPicker" :columns="roomList" keyName="Name"
			@cancel="showRoomPicker=false" @confirm="changeRoom"></u-picker> -->

		<view style="position: fixed;bottom:0px;left: 0px;width: 100%">
			<view class="flex align-center justify-center">
				<button class="cu-btn bg-tea " style="width: 88%;" @click="fastRenewOrder">立即续费</button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomInfo: {},
				orderDetalist: {},
				memberInfo: {},
				showTimePicker: false, //展示时间选择
				changeRoomId: '',
				maxEndTime: '',
				BeginTime: '',
				EndTime: '',
				showRoomPicker: false,
				changeEndTime:'',
				hours: 0, //共计时长
				price:0,
				totalFre: 0 ,
				renewPrice: {
					memberPrice: 0, //会员价格，
					price: 0, //非会员价格
				},
				orderId: '',
				changeOrderStatusTotal: 0,
				value1: Number(new Date()),
			}
		},
		onLoad(_params) {
			this.orderId = _params.orderId;
			this.getOrderDetalis();
			this.getRoomListByOrderId();
		},
		methods: {
			//立即续费
			fastRenewOrder() {
				uni.showLoading();
				let pOrderNo=this.orderDetalist.orderNo;
				if (this.orderDetalist.pOrderNo){
					pOrderNo = this.orderDetalist.pOrderNo
				};
				let params = 'storeId=' + this.orderDetalist.storeId + '&roomId=' + this.orderDetalist.roomid + '&startTime=' + this.orderDetalist.endTime +
					'&endTime=' + this.EndTime +
					'&allhoure=' + this.hours + '&roomImage=' + this.roomInfo.mainPic +
					// + this.storeDetalis.store.mainPicUrl +
					'&storeName=' +
					this.orderDetalist.mchName + '&roomName=' + this.orderDetalist.roomName+'&pOrderNo=' + pOrderNo + '&changeMealsId='+'';
				uni.$u.http.post('/rest/api/checkExtend', {
					// orderNo: this.orderId,
					roomId: this.orderDetalist.roomid,
					endTime: this.EndTime,
					beginTime: this.orderDetalist.endTime
				}).then(res => {
					if(res.data.isCheck){
						uni.navigateTo({
							url: '/pagesA/store/orderconfirm?' + params
						});
					}else{
						console.log(res.data);
						this.EndTime = res.data.EndTime;
						
						uni.showToast({
							title: res.data.desc,
							icon: 'none'
						});
					}



				});
			},
			//选择了结束时间
			confirmEndTime(e) {
				this.showTimePicker = false;
				//计算时长，并计算金额
				this.EndTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
				
				//let orderEndTime=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');

				//console.log(this.orderDetalist.EndTime);
				//console.log(Date.parse(this.changeEndTime));
				//console.log(Date.parse(this.orderDetalist.EndTime));

				let _c_year = uni.$u.timeFormat(e.value, 'yyyy');
				let _c_month = uni.$u.timeFormat(e.value, 'mm');
				let _c_day = uni.$u.timeFormat(e.value, 'dd');
				let _c_hour = uni.$u.timeFormat(e.value, 'hh');
				let _c_minu = uni.$u.timeFormat(e.value, 'MM');

				let cTime = new Date(_c_year, _c_month, _c_day, _c_hour, _c_minu, 0);

				let _e_year = uni.$u.timeFormat(this.orderDetalist.endTime, 'yyyy');
				let _e_month = uni.$u.timeFormat(this.orderDetalist.endTime, 'mm');
				let _e_day = uni.$u.timeFormat(this.orderDetalist.endTime, 'dd');
				let _e_hour = uni.$u.timeFormat(this.orderDetalist.endTime, 'hh');
				let _e_minu = uni.$u.timeFormat(this.orderDetalist.endTime, 'MM');

				let eTime = new Date(_e_year, _e_month, _e_day, _e_hour, _e_minu, 0);

				let cha = parseInt(Date.parse(cTime) - Date.parse(eTime)) /
					1000 / 60;
				//console.log(cha)


				this.hours = parseFloat(cha / 60).toFixed(1);
				this.totalFre = this.hours*this.price;
				

			},
			getOrderDetalis() {
				uni.showLoading();
				// uni.$u.http.post('/Customer/CheckUserIsVip').then(res => {
				// 	this.memberInfo = res.data;
				// });
				uni.$u.http.post('/rest/api/orderDetail', {
					orderNo: this.orderId
				}).then(res => {
					this.orderDetalist = res.data[0];
					
					this.getTimeSlot();
					this.getRoomListByOrderId();
				})
			},

			//获取房间可选时间段
			getTimeSlot() {
				uni.showLoading();
				uni.$u.http.post('/rest/api/extendOrder', {
					orderNo: this.orderId,
					
				}).then(res => {
					// this.showTimePicker = true;
					this.maxEndTime = new Date(res.data.maxEndTime).getTime();
					this.BeginTime = new Date(res.data.BeginTime).getTime();
					this.EndTime = res.data.EndTime;
					this.hours = res.data.hours;
					this.price = res.data.price/100;
					this.totalFre = res.data.totalFre/100;
				
					// this.showTimePicker = true;
				});
			},
			getRoomListByOrderId(){
				uni.$u.http.post('/rest/api/roomByid', {
					roomId: this.orderDetalist.roomid,
					
				}).then(res => {
					this.roomInfo = res.data;
				});
			},
				
			goBack() {
				uni.navigateBack();
			}

		}
	}
</script>

<style scoped>

</style>
